<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>事件修饰符</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
        <style>
            *{
                margin-top: 20px;;
            }
            .demo1{
                height: 50px;
                background-color: skyblue;
            }
            .box1{
                padding: 20px;
                background-color: orange;
            }
            .box2{
                padding: 20px;
                background-color: skyblue;
            }
            .list{
                width: 200px;
                height: 200px;
                background-color: orange;
                overflow: auto;
            }
            li{
                height: 100px;
            }
        </style>
    </head>
    <body>
       <!-- Vue中的事件修饰符
            1.prevent：阻止默认事件（常用）
            2.stop：阻止冒泡事件（常用）
            3.once：事件只触发一次（常用）
            4.capture：使用事件的捕获模式
            5.self：只有event.target是当前操作的元素时才触发事件 
            6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕 -->
        <div id ="root">
            <h1>欢迎来到{{name}}学习</h1>
            <!-- 1.阻止默认事件 -->
            <a href="http://www.baidu.com" @click.prevent="showInfo">点我</a>
            <!-- 2.阻止冒泡事件 -->
             <div class="demo1" @click="showInfo">
                <button @click.stop="showInfo">点我2</button>
                <!-- 能阻止冒泡，但不能阻止跳转，同时用两个修饰符，注意顺序，哪个在前先阻止哪个 -->
                <a href="http://www.baidu.com" @click.stop.prevent="showInfo">点我跳转吗</a>
             </div>
             <!-- 3.事件只触发一次 -->
             <button @click.once="showInfo">点我3</button>
             <!-- 4.捕获模式，不加会先从内向外执行，加了会在捕获模式触发事件 -->
              <!-- 捕获阶段：从外向内，需要在外面加
                   冒泡阶段：从内向外 -->
             <div class="box1" @click.capture="showMsg(1)">
                div1
                <div class="box2" @click="showMsg(2)">div2</div>
             </div>

            <!-- 5.self模式 只有当前操作的元素是自己(当前是div)时，才触发事件（这里操作的的是button按钮，所以不会触发div的事件）-->
             <div class="demo1" @click.self="showInfo2">
                <button @click="showInfo2">点我2</button>
             </div>

             <!-- 6.事件的默认行为立即执行，无需等待事件回调执行完毕
                @scroll也是滚动事件，而是滚动条滚动才会触发，不受影响
                @wheel是滚动轮滚动才会执行，如果不加passive：滚动后滚动条不会滚动，而是要等待demo事件执行之后才会滚动；加上就会立即执行，不会等待demo事件 -->
              <ul @scroll="demo" class="list">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
              </ul>
            
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false
            const vm = new Vue({
                el:'#root',
                data:{
                    name:'课堂'
                },
                methods:{
                    showInfo(event){
                        //event.preventDefault()//阻止默认事件，阻止跳转页面。和@click.prevent同理
                        //event.stopPropagation() //阻止冒泡 等同于@click.stop
                        alert("你好！")
                    },
                    showMsg(num){
                        console.log(num)
                    },
                    showInfo2(event){
                        //这里的target是元素button
                        alert('你好')
                        console.log(event.target)
                    },
                    demo(){
                        for (let i = 0; i<10000;i++){
                            console.log('#')
                        }
                        console.log('执行完了')
                    }
                }
            })
           
        </script>

        
    </body>
</html>